<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-categorize-animation.js"></script>
    <script src="../dist/plugin-preload.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
    <style>
      #jspsych-categorize-animation-stimulus {
        width: 300px;
        height: 225px;
      }
    </style>
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    var preload = {
      type: jsPsychPreload,
      auto_preload: true
    };
    
    // If render_on_canvas is false, the images will be shown via an <img> rather than <canvas> element.
    // In some browsers, the first time the images are shown, the <img> method (render_on_canvas: false) will produce a brief 
    // blank screen (white flash) between images.
    var trials = {
      type: jsPsychCategorizeAnimation,
      stimuli: ['img/happy_face_1.jpg', 'img/sad_face_3.jpg'],
      key_answer: 'd',
      choices: ['d', 's'],
      text_answer: 'different',
      feedback_duration: 1000,
      correct_text: "<p>Correct. The faces had %ANS% expressions.</p>",
      incorrect_text: "<p>Incorrect. The faces had %ANS% expressions.</p>",
      prompt: "<p>Press &quot;d&quot; if the faces had different emotional expressions. Press &quot;s&quot; if the faces had the same emotional expression.</p>",
      //render_on_canvas: false
    };

    jsPsych.run([preload, trials]);

  </script>
</html>
